<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bs表单 含JS和JQ写法</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Bootstarp1</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/index.css">
	
</head>
<body>
     <form>
  <div class="form-group">
   	<div class="checkbox">
    <label>
      <input type="checkbox"> 爱好1
    </label>	
     <label>
      <input type="checkbox"> 爱好2
    </label>
     <label>
      <input type="checkbox"> 爱好3
    </label>
     
      <input type="button" value="all" class="bg-primary"> 
   
      
      <input type="button" value="rever" class="bg-success"> 
    
      
      <input type="button" value="cancel" class="bg-info"> 
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
<!-- JS实现 -->
<!-- <script type="text/javascript">
	var checkboxs=document.querySelectorAll('input[type="checkbox"]')
	console.log(checkboxs);//打印一下看下获取到没有
	var allSelect=document.querySelector('input[value="all"]')
	
	// 全选事件
	allSelect.onclick=function(){
		// 遍历所有的被点击选项
		for(var i=0;i<checkboxs.length;i++){
			// 为每一个被点击选项卡添加属性checked;
			checkboxs[i].checked="checked";
		}
	}
	// 反选事件
	var resver=document.querySelector('input[value="rever"]');
	resver.onclick=function(){
		// 遍历所有的被点击选项
		for(var i=0;i<checkboxs.length;i++){
			
			checkboxs[i].checked=!checkboxs[i].checked;
		}
	} 
	// 取消事件	
	var quxiao=document.querySelector('input[value="cancel"]');
	quxiao.onclick=function(){
			for(var i=0;i<checkboxs.length;i++){
			
			checkboxs[i].checked="";
		}
	}
</script> -->
<!-- JQ实现 -->
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var inputs=$('input[type="checkbox"]');
//正选
console.log($('input[value=all]'));
$('input[value="all"]').click(function(){
	inputs.prop('checked',true)
})
//反选
$('input[value="rever"]').click(function(){
	for(var i=0;i<inputs.length;i++){
		inputs.eq(i).prop('checked',!inputs.eq(i).prop('checked'))
	}
})
//取消
$('input[value="cancel"]').click(function(){
	inputs.prop('checked',false)
})
</script>

</body>
</html>